import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["rightContentRender", "prefixCls"];
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDebounceFn } from '@ant-design/pro-utils';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import { useRef, useState } from 'react';
import BaseMenu from '../SiderMenu/BaseMenu';
import { defaultRenderLogoAndTitle } from '../SiderMenu/SiderMenu';
import './index.less';
/**
 * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
 *
 * @param param0
 */

export var RightContent = function RightContent(_ref) {
  var rightContentRender = _ref.rightContentRender,
      prefixCls = _ref.prefixCls,
      props = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState('auto'),
      _useState2 = _slicedToArray(_useState, 2),
      rightSize = _useState2[0],
      setRightSize = _useState2[1];
  /** 减少一下渲染的次数 */


  var setRightSizeDebounceFn = useDebounceFn( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(width) {
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              setRightSize(width);

            case 1:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }(), 160);
  return _jsx("div", {
    className: "".concat(prefixCls, "-right-content"),
    style: {
      minWidth: rightSize
    },
    children: _jsx("div", {
      style: {
        paddingRight: 8
      },
      children: _jsx(ResizeObserver, {
        onResize: function onResize(_ref3) {
          var width = _ref3.width;
          setRightSizeDebounceFn.run(width);
        },
        children: rightContentRender && _jsx("div", {
          className: "".concat(prefixCls, "-right-content-resize"),
          children: rightContentRender(_objectSpread(_objectSpread({}, props), {}, {
            // 测试专用
            //@ts-ignore
            rightContentSize: rightSize
          }))
        })
      })
    })
  });
};

var TopNavHeader = function TopNavHeader(props) {
  var ref = useRef(null);
  var theme = props.theme,
      onMenuHeaderClick = props.onMenuHeaderClick,
      contentWidth = props.contentWidth,
      rightContentRender = props.rightContentRender,
      propsClassName = props.className,
      style = props.style,
      headerContentRender = props.headerContentRender,
      layout = props.layout;
  var prefixCls = "".concat(props.prefixCls || 'ant-pro', "-top-nav-header");
  var headerDom = defaultRenderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
    collapsed: false
  }), layout === 'mix' ? 'headerTitleRender' : undefined);
  var className = classNames(prefixCls, propsClassName, {
    light: theme === 'light'
  });

  var defaultDom = _jsx(BaseMenu, _objectSpread(_objectSpread({}, props), props.menuProps));

  var headerContentDom = headerContentRender ? headerContentRender === null || headerContentRender === void 0 ? void 0 : headerContentRender(props, defaultDom) : defaultDom;
  return _jsx("div", {
    className: className,
    style: style,
    children: _jsxs("div", {
      ref: ref,
      className: "".concat(prefixCls, "-main ").concat(contentWidth === 'Fixed' ? 'wide' : ''),
      children: [headerDom && _jsx("div", {
        className: "".concat(prefixCls, "-main-left"),
        onClick: onMenuHeaderClick,
        children: _jsx("div", {
          className: "".concat(prefixCls, "-logo"),
          id: "logo",
          children: headerDom
        }, "logo")
      }), _jsx("div", {
        style: {
          flex: 1
        },
        className: "".concat(prefixCls, "-menu"),
        children: headerContentDom
      }), rightContentRender && _jsx(RightContent, _objectSpread({
        rightContentRender: rightContentRender,
        prefixCls: prefixCls
      }, props))]
    })
  });
};

export default TopNavHeader;